<template>
  <div class="main-app">
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="form-inline">
        <el-form-item label="仓库名称:">
          <el-input v-model="formInline.name" clearable />
        </el-form-item>
        <el-form-item label="负责人:">
          <el-input v-model="formInline.personName" clearable />
        </el-form-item>
        <el-form-item label="仓库类别:">
          <el-select v-model="formInline.type" placeholder="请选择仓库类型">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" clearable />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh-right" @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="show-result">

      <!-- 加载动态菜单 -->
      <el-form :inline="true" class="form-inline">
        <el-form-item v-for="item in toolbtn" :key="item.id" >
          <el-button type="primary" :icon='item.meta.icon' @click="showViews(item.name)">
            {{ item.meta.title }}
          </el-button>
        </el-form-item>
      </el-form>

      <!-- <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" @click="add">
            新增
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-edit" :disabled="disabled" @click="edit">
            编辑
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-view" :disabled="disabled" @click="view">
            查看详情
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-place" :disabled="disabled" @click="warelocation">
            库位管理
          </el-button>
        </el-form-item>
      </el-form> -->

      <div class="result" style="margin-top: -10px">
        <el-table ref="multipleTable" v-loading="loading" border :data="tableData" tooltip-effect="dark"
                  style="width: 100%" align="center" @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="仓库名称" />
          <el-table-column prop="personName" label="负责人" />
          <el-table-column prop="orgName" label="单位名称" />
          <el-table-column label="仓库类别">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.type | showType }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="totalCapacity" label="总容量(吨)" />
          <el-table-column prop="inventoryWeight" label="当前库存量(吨)" />
          <el-table-column label="创建时间">
            <template slot-scope="scope">
              {{ scope.row.createTime | parseDate }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="最后更新时间">
            <template slot-scope="scope">
              {{ scope.row.updateTime | parseDate }}
            </template>
          </el-table-column> -->
        </el-table>
        <div class="page">
          <el-pagination background :current-page.sync="currentPage" layout="total,prev, pager, next, sizes"
                         :total="total" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" @current-change="handleCurrentChange"
                         @size-change="handleSizeChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  pageMixin
} from "../../../mixins/index";
import {
  getList
} from "../../../api/warehouse";
import {
  WarehouseCategory
} from "../../../utils/resource";
export default {
  filters: {
    parseDate(value) {
      if (value) {
        return value.replace("T", " ");
      }
      return null;
    },
    showType(value) {
      if (value) {
        var obj = WarehouseCategory.find((p) => p.value === `${value}`);
        var label = "";
        if (obj) {
          label = obj.label;
        }
        return label;
      }
    },
  },
  mixins: [pageMixin],
  data() {
    return {
      formInline: {
        name: "",
        personName: "",
        type: "",
      },
      options: WarehouseCategory,
      dialogVisible: false,
      form: {},
      toolbtn: [] // 列表顶部按钮
    };
  },
  async created() {
    await this.init();
  },
  methods: {
    // 列表顶部功能按钮点击事件
    showViews(action){
      //console.log(action);
      switch(action)
      {
        case '新增':
          this.$router.push(`/warehouse/create`);
          break;
        case '编辑':
          if(this.ids.length != 1) {
            this.$message.error('此功能仅限操作1条数据！');
            return;
          }
          this.$router.push(`/warehouse/edit/${this.id}`);
          break;
        case '查看详情':
          if(this.ids.length != 1) {
            this.$message.error('此功能仅限操作1条数据！');
            return;
          }
          this.$router.push(`/warehouse/view/${this.id}`);
          break;
        case '库位管理':
          if(this.ids.length != 1) {
            this.$message.error('此功能仅限操作1条数据！');
            return;
          }
          this.$router.push(`/warehouse/location/${this.id}`);
          break;
      }
    },
    // warelocation() {
    //   this.$router.push(`/warehouse/location/${this.id}`);
    // },
    // view() {
    //   this.$router.push(`/warehouse/view/${this.id}`);
    // },
    // edit() {
    //   this.$router.push(`/warehouse/edit/${this.id}`);
    // },
    // add() {
    //   this.$router.push(`/warehouse/create`);
    // },
    closeDialog() {
      this.dialogVisible = false;
    },
    async reset() {
      this.formInline = {
        name: "",
        personName: "",
        type: "",
      };
      await this.init();
    },
    async init() {
      this.tableData = [];
      this.loading = true;
      const {
        data,
        count
      } = await getList({
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        name: this.formInline.name,
        PersonName: this.formInline.personName,
        type: this.formInline.type,
      });
      this.tableData = data;
      this.total = count;
      this.loading = false;

      // 初始化按钮数据
      this.toolbtn = JSON.parse(localStorage.getItem('仓库信息'));
      //console.log(this.toolbtn);

    },
  },
};
</script>

<style lang="scss" scoped>
  .result {
    margin-top: 10px;
  }

  .show-result {
    margin-top: 10px;
  }

  .dialog_diy {
    ::v-deep .el-dialog__wrapper {

      // eslint-disable-line
      .el-dialog {
        .el-dialog__body {
          padding: 0px;
        }

        .el-dialog__header {
          padding: 0px;
        }

        .el-dialog__headerbtn {
          top: 5px;
          right: 5px;
          padding-top: 10px;
        }

        .el-dialog__headerbtn .el-dialog__close {
          color: #fff;
          height: 30px;
          width: 35px;
        }

        .el-dialog__headerbtn .el-dialog__close:hover {
          color: gray;
        }
      }
    }
  }
</style>
